<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侃侃岛 - 注册</title>
    <link rel="stylesheet" href="css/register.css">
</head>

<body>
<div class="register-container">
    <div class="register-header">
        <h1>侃侃岛</h1>
        <p>创建您的账号</p>
    </div>
    <div class="register-content">
        <form id="register-form" class="register-form">
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" id="username" class="form-control" placeholder="请输入用户名(3-16字符)" required>
                <div class="error-message" id="username-error"></div>
            </div>

            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" class="form-control" placeholder="请输入密码(至少3字符)" required>
                <div class="password-strength">
                    <div class="strength-meter" id="strength-meter"></div>
                </div>
                <div class="password-rules">
                    密码需包含字母
                </div>
                <div class="error-message" id="password-error"></div>
            </div>

            <div class="form-group">
                <label for="confirm-password">确认密码</label>
                <input type="password" id="confirm-password" class="form-control" placeholder="请再次输入密码" required>
                <div class="error-message" id="confirm-error"></div>
            </div>

            <button type="submit" class="register-btn">注 册</button>
        </form>

        <div class="login-link">
            已有账号? <a href="/login.html">立即登录</a>
        </div>
    </div>
    <!-- 通知 -->
    <div class="set-notification" id="set-notification">
        <i class="fas fa-check-circle"></i> <span id="set-notificationText"></span>
    </div>
</div>

<script src="js/jquery.min.js"></script>

<script>
    // 页面加载时执行
    window.onload = function() {
        document.body.style.zoom = "90%";
    };
</script>



<script>
    // 获取DOM元素
    const registerForm = document.getElementById('register-form');
    const passwordInput = document.getElementById('password');
    const confirmPasswordInput = document.getElementById('confirm-password');
    const strengthMeter = document.getElementById('strength-meter');
    const usernameInput = document.getElementById('username');
    const emailInput = document.getElementById('email');

    // 密码强度检测
    passwordInput.addEventListener('input', () => {
        const password = passwordInput.value;
        let strength = 0;

        // 长度检测
        if (password.length >= 8) strength += 25;
        if (password.length >= 12) strength += 10;

        // 包含小写字母
        if (/[a-z]/.test(password)) strength += 15;

        // 包含大写字母
        if (/[A-Z]/.test(password)) strength += 15;

        // 包含数字
        if (/[0-9]/.test(password)) strength += 15;

        // 包含特殊字符
        if (/[^A-Za-z0-9]/.test(password)) strength += 20;

        // 更新强度条
        strengthMeter.style.width = `${Math.min(strength, 100)}%`;

        // 更新颜色
        if (strength < 40) {
            strengthMeter.style.background = '#ff4757'; // 弱
        } else if (strength < 70) {
            strengthMeter.style.background = '#ffa502'; // 中
        } else {
            strengthMeter.style.background = '#2ed573'; // 强
        }
    });

    // 用户名验证
    usernameInput.addEventListener('blur', () => {
        const username = usernameInput.value.trim();
        const errorElement = document.getElementById('username-error');

        if (username.length < 3 || username.length > 16) {
            showError(errorElement, '用户名长度需在3-16个字符之间');
            return;
        }

        if (!/^[a-zA-Z0-9_]+$/.test(username)) {
            showError(errorElement, '用户名只能包含字母、数字和下划线');
            return;
        }

        hideError(errorElement);
    });

    // 密码验证
    passwordInput.addEventListener('blur', () => {
        const password = passwordInput.value;
        const errorElement = document.getElementById('password-error');

        if (password.length < 3) {
            showError(errorElement, '密码长度至少为3个字符');
            return;
        }

        if (!/[a-z]/.test(password)) {
            showError(errorElement, '密码需包含小写字母');
            return;
        }

        // if (!/[A-Z]/.test(password)) {
        //     showError(errorElement, '密码需包含大写字母');
        //     return;
        // }

        // if (!/[0-9]/.test(password)) {
        //     showError(errorElement, '密码需包含数字');
        //     return;
        // }

        // if (!/[^A-Za-z0-9]/.test(password)) {
        //     showError(errorElement, '密码需包含特殊字符');
        //     return;
        // }

        hideError(errorElement);
    });

    // 确认密码验证
    confirmPasswordInput.addEventListener('blur', () => {
        const password = passwordInput.value;
        const confirmPassword = confirmPasswordInput.value;
        const errorElement = document.getElementById('confirm-error');

        if (password !== confirmPassword) {
            showError(errorElement, '两次输入的密码不一致');
            return;
        }

        hideError(errorElement);
    });

    // 表单提交处理
    registerForm.addEventListener('submit', (e) => {
        e.preventDefault();

        // 获取表单值
        const username = usernameInput.value.trim();
        const password = passwordInput.value;
        const confirmPassword = confirmPasswordInput.value;

        // 验证所有字段
        let isValid = true;

        // 验证用户名
        if (username.length < 3 || username.length > 16 || !/^[a-zA-Z0-9_]+$/.test(username)) {
            showError(document.getElementById('username-error'), '用户名格式不正确');
            isValid = false;
        }

        // 验证密码
        if (password.length < 3 ||
            !/[a-z]/.test(password)){
            // !/[A-Z]/.test(password) ||
            // !/[0-9]/.test(password)){
            // !/[^A-Za-z0-9]/.test(password)) {
            showError(document.getElementById('password-error'), '密码不符合要求');
            isValid = false;
        }

        // 验证确认密码
        if (password !== confirmPassword) {
            showError(document.getElementById('confirm-error'), '两次输入的密码不一致');
            isValid = false;
        }

        // 如果验证通过，提交表单
        if (isValid) {
            // 这里可以添加实际的注册逻辑
            $.ajax({
                url: "login/register",
                type: "post",
                data: {
                    username: username,
                    password: password
                },
                success: function (result) {
                    let data = result.data;
                    if (data.status == 'fail') {
                        setShowNotification(data.msg);
                        return;
                    }
                    setShowNotification("注册成功")
                    window.location.href = '/login.html';
                }
            });
        }
    });

    // 显示错误信息
    function showError(element, message) {
        element.textContent = message;
        element.style.display = 'block';
    }

    // 隐藏错误信息
    function hideError(element) {
        element.style.display = 'none';
    }

    function setShowNotification(message, type = 'success') {
        $('#set-notificationText').text(message);
        $(`#set-notification`).removeClass().addClass('set-notification ' + type);
        $("#set-notification").addClass('show');
        setTimeout(function() {
            $('#set-notification').removeClass('show');
        }, 3000);
    }

</script>
</body>
</html>